<template>
  <div class="flex direction-column">
    <div class="content-block">
      <div class="info-head">重点指标综合分析</div>
      <div class="info-content padding">
        <el-table
          v-loading="loading" class="table"
          :data="lists" height="500px"
          :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white',
            textAlign: 'center'
          }"
          :cell-style="{
            textAlign: 'center'
          }"
        >
          <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
            <template v-if="column.children && column.children.length > 0">
              <el-table-column v-for="child in column.children" :key="child.prop" v-bind="child"></el-table-column>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content-block margin-top">
      <div class="info-head">全市重点指标趋势</div>
      <div class="info-content">
        <v-chart :option="chartOption" style="width:100%;height:500px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'energy-efficiency-analysis-indicator',
  data () {
    return {
      loading: false,
      lists: [],
      columns: [
        {
          label: '区域/行业',
          prop: 'col1'
        },
        {
          label: '综合能源消费量',
          children: [
            {
              label: '万吨标准煤',
              prop: 'col2'
            },
            {
              label: '同比',
              prop: 'col3'
            },
          ]
        },
        {
          label: '碳排放',
          children: [
            {
              label: '万吨二氧化碳',
              prop: 'col4'
            },
            {
              label: '同比',
              prop: 'col5'
            },
          ]
        },
        {
          label: '工业总产量',
          children: [
            {
              label: '万吨标准煤',
              prop: 'col6'
            },
            {
              label: '同比',
              prop: 'col7'
            },
          ]
        },
        {
          label: '产值单耗',
          children: [
            {
              label: '万吨标准煤',
              prop: 'col8'
            },
            {
              label: '同比',
              prop: 'col9'
            },
          ]
        },
        {
          label: '电耗量',
          children: [
            {
              label: '万吨标准煤',
              prop: 'col10'
            },
            {
              label: '同比',
              prop: 'col11'
            },
          ]
        },
        {
          label: '煤耗量',
          children: [
            {
              label: '万吨标准煤',
              prop: 'col12'
            },
            {
              label: '同比',
              prop: 'col13'
            },
          ]
        },
        {
          label: '天然气耗量',
          children: [
            {
              label: '万立方米',
              prop: 'col14'
            },
            {
              label: '同比',
              prop: 'col15'
            },
          ]
        },
        {
          label: '原油耗量',
          children: [
            {
              label: '万吨标准煤',
              prop: 'col16'
            },
            {
              label: '同比',
              prop: 'col17'
            },
          ]
        },
        {
          label: '能源消费总量',
          children: [
            {
              label: '万吨标准煤',
              prop: 'col18'
            },
            {
              label: '同比',
              prop: 'col19'
            },
          ]
        },
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    chartOption () {
      const columns = this.columns
      return {
        legend: {
          left: 'center',
          top: '10%',
          data: columns.slice(1).map(v => v.label)
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          top: '26%',
          left: '5%',
          right: '5%'
        },
        xAxis: {
          type: 'category',
          data: ['进贤县', '南昌县', '安义县', '新建区', '东湖区', '西湖区', '青山湖区', '青云谱区', '红谷滩区']
        },
        yAxis: {
          type: 'value',
          name: '万吨标准煤'
        },
        series: [
          ...columns.slice(1).map((v) => ({
            type: 'line',
            smooth: true,
            name: v.label,
            data: Array(9).fill(1).map(() => Math.round(Math.random() * 99 + 1))
          }))
        ]
      }
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      const rand = () => Math.round(Math.random() * 99 + 1)
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.lists = [
            ...['进贤县', '南昌县', '安义县', '新建区', '东湖区', '西湖区', '青山湖区', '青云谱区', '红谷滩区'].map((v, i) => ({
              id: i + 1,
              col1: v,
              col2: rand(),
              col3: rand(),
              col4: rand(),
              col5: rand(),
              col6: rand(),
              col7: rand(),
              col8: rand(),
              col9: rand(),
              col10: rand(),
              col11: rand(),
              col12: rand(),
              col13: rand(),
              col14: rand(),
              col15: rand(),
              col16: rand(),
              col17: rand(),
              col18: rand(),
              col19: rand()
            }))
          ]
        }, 300)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .content-block {
    background: white;
    border-radius: 4px;
  }
  .info-head {
    padding: 20px $gutter 0 $gutter;
    font-size: 16px;
  }
</style>
